<webview> Tag

Use the <webview> tag to embed guest content (such as web pages) in your app. Different from the <iframe>, the <webview> runs in a separate process than your app; it doesn’t have the same permissions as your app and all interactions between your app and embedded content will be asynchronous. This keeps your app safe from the embedded content.

Synopsis

To embed a web page in your app, add the webview tag to your app’s embedder page (this is the app page that will display the guest content). In its simplest form, the webview tag includes the src of the web page and css styles that control the appearance of the webview container:

<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px">
</webview>

References

See Chrome document of <webview> tag for detailed API references.

NW.js added the following methods besides upstream APIs:

webview.showDevTools(show, [container])

• show {boolean} flag: open or close the devtools window
• container {webview Element} Optional the element of the <webview> to be used to display devtools. By default, the DevTools is shown with a new window.

loading local files in webview

Add the following permission to the manifest:

  "webview": {
     "partitions": [
        {
          "name": "trusted",
          "accessible_resources": [ "<all_urls>" ]
        }
     ]
  }

and add partition="trusted" attribute to the webview tag.

Node.js support in webview

To enable Node.js support in WebView, add the allownw attribute to the webview tag. Then Node.js will be turned on, no matter it loads local file or remote site. Use this feature with caution because webview is normally supposed to load untrusted contents.

executeScript in main world

The executeScript function in Chrome lets you inject JS code into webview, but in an isolated world. To access JS objects in the target DOM context, you can inject code into the main world context instead. Simply adding {mainWorld: true} to InjectDetails typed parameter of the function.

Cookies support in webview

Webview has getCookieStoreId() function which returns storeId which can be used in chrome.cookies API.

Example in console:

Let’s assume you have simple NW.js app with webview.

Show all cookies for e.g. http://docs.nwjs.io in console (to have some cookies there you need to visit page first):

  chrome.cookies.getAll({
    url:"http://docs.nwjs.io", 
    storeId:webview.getCookieStoreId()
  }, console.log.bind(console));